Web Accessibility: Building a Web for Everyone

What web accessibility is, why it matters, and how it benefits everyone — not just people with disabilities.

Anna Moua 2025-02-24

Web Accessibility: Building a Web for Everyone

The internet is one of the most essential tools in modern life — but for over 1.3 billion people living with a disability, much of it remains out of reach. Web accessibility is the practice of designing websites so that everyone, regardless of ability, can use them.

What Is WCAG?

The Web Content Accessibility Guidelines (WCAG) are the global standard for accessibility. They're built around four principles — content must be Perceivable, Operable, Understandable, and Robust (POUR). Most countries and accessibility laws reference WCAG Level AA as the minimum requirement.

Who It Affects — And How

Inaccessibility has real consequences for real people every day:

A blind user tries to apply for a job online, but the form fields have no labels. Her screen reader just says "edit text" for every field. She cannot complete the application.
A deaf college student can't access his professor's lecture videos because there are no captions or transcripts. His hearing classmates move ahead while he falls behind.
A stroke survivor with limited hand mobility tries to shop online, but every dropdown menu only works with a mouse. He gives up and calls the store instead.

These aren't rare situations. They happen every day on websites that weren't built with accessibility in mind.

Code Examples

1. Always Label Your Form Fields

Without a label, screen readers have no idea what an input field is for.

<!-- Bad — screen reader says "edit text", user has no context -->
<input type="text" name="firstName">

<!-- Good — screen reader says "First Name, edit text" -->
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName">

2. Use Alt Text on Images

Alt text describes an image for users who can't see it.

<!-- Bad — screen reader just says "image" -->
<img src="chart.png">

<!-- Good — screen reader describes what the image shows -->
<img src="chart.png" alt="Bar chart showing a 40% increase in sales from Q1 to Q4">

<!-- For decorative images — screen reader skips it entirely -->
<img src="divider.png" alt="">

3. Use Semantic HTML

Using the right HTML elements tells assistive technology what it's looking at.

<!-- Bad — a div pretending to be a button, keyboard users can't reach it -->
<div onclick="submitForm()">Submit</div>

<!-- Good — a real button, keyboard accessible and screen reader friendly -->
<button type="submit">Submit</button>

<!-- Bad — no structure, screen readers can't navigate -->
<div class="nav">
  <div class="link"><a href="/">Home</a></div>
</div>

<!-- Good — semantic landmark elements screen readers understand -->
<nav>
  <a href="/">Home</a>
</nav>

4. Never Use Color Alone to Communicate

Color blind users will miss anything communicated only through color.

<!-- Bad — only red color tells the user something is wrong -->
<input type="text" style="border: 2px solid red;">

<!-- Good — color AND a message tells everyone something is wrong -->
<input type="text" style="border: 2px solid red;" aria-describedby="errorMsg">
<span id="errorMsg">Please enter a valid email address.</span>

5. Add ARIA Labels to Icon-Only Buttons

If a button has no visible text, screen readers won't know what it does.

<!-- Bad — screen reader just says "button" -->
<button>
  <img src="search-icon.png">
</button>

<!-- Good — screen reader says "Search button" -->
<button aria-label="Search">
  <img src="search-icon.png" alt="">
</button>

It Benefits Everyone

Accessibility improvements don't only help people with disabilities — they make the web better for everyone. Captions help people watching videos in noisy environments. Keyboard navigation helps power users. Clear, simple layouts help non-native speakers and people reading on small screens. Well-structured pages load faster and rank better in search engines.

This is known as the Curb Cut Effect — features designed for people who need them most end up benefiting everyone.

It's Also the Law

In the US, the ADA and Section 508 require accessible digital content. The European Accessibility Act took full effect in 2025. Thousands of accessibility-related lawsuits are filed every year. Building accessibly from the start is far cheaper than fixing it after a legal complaint.

Where to Start

You don't have to overhaul your entire site at once. Start here:

Label every form field, button, and image clearly.
Make sure your site can be navigated using only a keyboard.
Add captions to any video content.
Check that your text has enough color contrast to be readable.
Run a free audit using Google Lighthouse or the axe browser extension.

Accessibility isn't a feature — it's a foundation. When you build for the people who need it most, you build something better for everyone.